$contrastGrey: #c8c8c8;

.timeline-flow-wrapper {
    font-size: 1.4em;
    padding: 15px;
    .step-progress {
        position: relative;
        top: 10px;
        padding-left: 40px;
        list-style: none;
        margin: 0;

        &::before {
            display: inline-block;
            content: "";
            position: absolute;
            top: 0;
            left: 15px;
            width: 10px;
            height: 100%;
        }

        &-item {
            position: relative;

            .status-text {
                position: relative;
                top: -11px;
            }

            &:not(:last-child),
            &.list-edge {
                padding-bottom: 40px;
                .connector {
                    border-left: 10px solid $contrastGrey;
                }
            }
            &.list-edge {
                padding-bottom: 10px !important;
            }

            .connector {
                display: inline-block;
                content: "";
                position: absolute;
                left: -30px;
                height: 100%;
                width: 10px;
            }

            .status-icon {
                content: "";
                display: inline-block;
                position: absolute;
                top: -5px;
                width: 22px;
                height: 12px;
                left: -36px;
                text-align: center;
                border-radius: 50%;
                background-color: white;
            }
        }
    }
}
